<template>
  <div>
    <van-nav-bar title="商品搜索">
      <template>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <!-- s搜索框 -->
    <van-search
      style="padding: 0px"
      v-model="value"
      show-action
      placeholder="搜索商品"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>

    <van-tree-select
      style="margin-top: 10px"
      class="list"
      height="160vw"
      :items="items"
      :main-active-index.sync="active"
    >
      <template #content>
        <van-image
          v-if="active === 0"
          src="https://img01.yzcdn.cn/vant/apple-1.jpg"
        />

        <van-image
          v-if="active === 1"
          src="https://img01.yzcdn.cn/vant/apple-2.jpg"
        />
      </template>
    </van-tree-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      items: [{ text: "分组 1" }, { text: "分组 2" }],
      value: "",
      onSearch: "",
    };
  },
};
</script>

<style lang="scss" scoped>
.list {
  margin-top: 50px;
}
</style>
